<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1 id="box">你好</h1>

  <ul>
    <li>嘻嘻嘻</li>
    <li>哈哈哈</li>
    <li>嘿嘿嘿</li>
  </ul>
  <!--  -->
  <input type="text" id="txt">
  <button>点击</button>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // 1.jq的html() 方法设置或 获取元素的html和文本内容  ----> 原生 innerHTML 
    console.log($("#box").html()) //获取
    // $("#box").html("<p>养乐多</p>")
    $("#box").html(function (index, oldVal) {
      // index 当前元素下标 oldVal原来的值
      return "<p>" + oldVal + "养乐多</p>"
    })
    // 2.jq的text() 设置和获取元素的文本内容  innerText
    $("ul li").text(function (index, oldVal) {
      return index + oldVal + "!!!!!!"
    })
    //3.jq的val() 方法设置和获取表单元素的值----原生的value
    $("button").click(function () {
      // console.log($("#txt").val())
      $("#txt").val("新的设置的值")
    })

  </script>
</body>

</html>